body{
    margin: 0;
    padding: 0;
}
.cover{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* background-image: linear-gradient(to bottom right, rgb(223, 62, 238), rgb(93, 115, 236)); */
    /*background-image: radial-gradient(rgb(93, 130, 231), rgb(196, 104, 233), rgb(29, 41, 29));*/
}
.imgAndSinger{
    float: left;
    width: 50%;
    text-align: center;
    transition: width 1s;
}
.foldBt{
    text-decoration: none;
    color: aqua;
}
.imgCover{
    position: relative;
    z-index: 10;
    left: -0.05%;
}
.imgCover2{
    width: 375px;
    height: 375px;
    margin: auto;
}
.img{
    width: 338px;
    height: 338px;
    /* border: 2px dashed rgba(147, 160, 31, 0.74); */
    border-radius: 50%;
    /* box-shadow:  0 0 40px rgb(71, 236, 195); */
    z-index: 10;
}
.circle{
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 0.4vw solid rgba(58, 247, 74, 0.74);
    position: relative;
    top: -349px;
    left: 3.02%;
    transition: all 1s;
}
.top{
    width: 354px;
    height: 177px;
    position: relative;
    overflow: hidden;
    top: -703px;
    left: 3.02%;
    border-top-right-radius:177px;
    border-top-left-radius:177px;
    z-index:0;
    overflow: hidden;
    transition: all 1s;
}
.top1{
    height: 100%;
    width: 100%;
    background: rgba(90, 41, 204, 0.733);
    transform-origin: center bottom;
}
.bottom{
    width: 354px;
    height: 177px;
    position: relative;
    overflow: hidden;
    border-bottom-right-radius:177px;
    border-bottom-left-radius:177px;
    top: -703px;
    left: 3.02%;
    z-index: 0;
    transition: all 1s;
}
.bottom1{
    height: 100%;
    width: 100%;
    background: rgba(90, 41, 204, 0.733);
    transform-origin: center top;
}
.nameAndSinger{
    top: -110%;
    color: #999999;
}
.name{
    margin-top: -80px;
    font-size: 1.5em;
    font-weight: bold;
    font-family: 楷体;
}
.singer{
    margin-top: -2vh;
    font-size: 1.2em;
    font-family: 楷体;
}
.geci{
    float: left;
    width: 40%;
    /*background: rgba(0, 0, 0, 0.514);*/
    /* overflow: auto; */
    overflow: hidden;
    transition: width 1s;
}
.player{
    clear: both;
    text-align: center;
}
.player button,input{
    border-radius: 10px;
}
.player a{
    vertical-align: middle;
    /*padding-top: 20px;*/
    line-height: 38px;
    text-decoration: none;
}
.button{
    display: inline-block;
    width: 100px;
    height: 38px;
    transition-duration: 0.6s;
}
/*阴影效果加上点击动画*/
.button-3d {
    position: relative;
    top: 0;
    -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
}
.button-3d:hover, .button-3d:focus {
    -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
}
.button-3d:active, .button-3d.active, .button-3d.is-active {
    top: 5px;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .15s;
    transition-duration: .15s;
    -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2);
}
.button-3d.button-action {
    -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); 
}
.button-3d.button-action:hover, .button-3d.button-action:focus {
    -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
}
.button-3d.button-action:active, .button-3d.button-action.active, .button-3d.button-action.is-active {
    -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
}
/*按钮的顶部*/
.button-action,
.button-action-flat {
  background-color: #A5DE37;
  border-color: #A5DE37;
  color: #FFF; }
  .button-action:visited,
  .button-action-flat:visited {
    color: #FFF; }
  .button-action:hover, .button-action:focus,
  .button-action-flat:hover,
  .button-action-flat:focus {
    background-color: #b9e563;
    border-color: #b9e563;
    color: #FFF; }
  .button-action:active, .button-action.active, .button-action.is-active,
  .button-action-flat:active,
  .button-action-flat.active,
  .button-action-flat.is-active {
    background-color: #a1d243;
    border-color: #a1d243;
    color: #8bc220; }
/*圆角*/
.button-pill {
    border-radius: 200px;
}
.geci ul{
    position: relative;
    transition: all 1s;
    padding: 0;
}
.geci li{
    list-style-type: none;
    line-height: 1.5em;
}
.songList{
    position: absolute;
    background-color:rgb(35,74,141,0.1);
    width: 30%;
    height: 54%;
    top:0px;
    right:0%;
    overflow: auto;
}
.songList table{
    table-layout: fixed;
}
.songList tr:hover{
    cursor: pointer;
    background: rgba(135, 200, 233, 0.288);
}
.songListCantFlow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999999;
}
.choicedSong{
    background:rgb(7,91,166,0.5);
}
.unChoicedSong{
    background: none;
}
.songClass{
    font-size: 24px;
    color: steelblue;
    margin: 5px 0px;
}
.geci a{
    text-decoration: none;
    color: white;
}
.geci span:hover{
    margin: 5px 0px;
}
#progressBar{
    margin: 0 auto;
    width: 600px;
    /*height: 50px;*/
    padding-top: 22px;
    display: flex;
    align-items: center;
}
#progressBar #progress{
    width: 70%;
    height: 6px;
    border-radius: 3px;
    margin: auto auto;
    background-color: #F1F5FD;
}
#progressBar #progress #bar{
    width: 0px;
    height: 100%;
    border-radius: 3px;
    background:#0072FF;
    box-shadow: 0px 0px 5px 1px #0072FF,
    0px 0px 5px 2px rgb(35,74,141),
    0px 0px 10px 4px rgb(35,74,141),
    0px 0px 1px rgb(35,74,141),
    0px 0px 1px rgb(35,74,141);
}
#progressBar #progress #bar #thumb{
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: white;
    box-shadow: 0px 0px 15px 5px #0072FF;
    position: relative;
    top:-4px;
    left: 7px;
    float: right;
}
.zjfm{
    height: 500px;
}
.geci #lyricList{
    height: 500px;
}
#progressBar #play{
    margin: 0px auto;
}
#time{
    color: #999999;
}